<template>
  <div>
    <a-empty v-if="!courseProp.length"></a-empty>
    <a-row :gutter="8" v-else>
      <a-col v-for="(course, index) in courseProp" :key="index" :span="4">
        <a-card
          class="space"
          :style="{
            backgroundColor: `${courseMap[course.course_type]['color']}`,
          }"
        >
          <a-icon
            :type="courseMap[course.course_type]['icon']"
            class="room_icon"
          />
          <div class="course-card">
            <div class="course-card_title">
              {{ course.name }}
            </div>
            <div class="course-card_block">
              <div class="course-card_block_item">
                <a-tag class="course-card_block_item_tag" color="#2db7f5"
                  >共 {{ course.total_study_hours }} 学时</a-tag
                >
                <a-tag class="course-card_block_item_tag" color="#ffb900"
                  >第 {{ course.semester }} 学期</a-tag
                >
              </div>
              <div class="course-card_block_item">
                <a-tag class="course-card_block_item_tag" color="#2db7f5"
                  >{{ course.credit }} 学分</a-tag
                >
                <a-tag class="course-card_block_item_tag" color="#ffb900"
                  >{{ course.evaluation }}课</a-tag
                >
              </div>
            </div>
            <!-- <a-tag color="#2db7f5">{{ course.name }}</a-tag> -->
            <!-- courseMap[course.course_type]["name"] -->
            <!-- <a-icon type="right-circle" style="font-size: 20px" /> -->
          </div>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import courseLayout from "@/utils/userConst";
export default {
  props: ["courseProp"],
  data() {
    return {
      courseMap: courseLayout.courseMap,
      checkedList: [],
      courses: [],
    };
  },
  watch: {
    courses: {
      immediate: true,
      handler(value) {
        this.courses = value;
      },
    },
  },
  methods: {
    //<a-checkbox @change="onChange($event, course.name)"></a-checkbox>
    // onChange(e, value) {
    //   if (e.target.checked) {
    //     this.checkedList.push(value);
    //   } else {
    //     let index = this.checkedList.findIndex((item) => {
    //       return item === value;
    //     });
    //     this.checkedList.splice(index, 1);
    //   }
    // },
  },
  mounted() {
    this.courses = this.courseProp;
    console.log(this.courses);
  },
};
</script>

<style lang="scss">
.my-statistic-title {
  margin-bottom: 10px;
  color: #fff;
  font-size: 20px;
  letter-spacing: 3px;
}

.btn-area {
  padding: 20px 0 20px;
  display: flex;
  justify-content: space-between;
}

.space {
  border-radius: 6px;
  color: #fff;
  /* font-weight: 500; */
  /* overflow: hidden;s */
  font-size: 14px;
}

.room_icon {
  min-height: 100%;
  font-size: 50px;
  position: absolute;
  top: 60%;
  right: -5%;
  color: #fff;
  opacity: 0.4;
}
.ant-card-body {
  padding: 10px 10px 10px 10px;
}
</style>
